<template>
    <div class="head">
        <div class="bigimg" >
            <img :src="url" alt="生活" :style="autoHeight" />
        </div>
        <div class="map" :style="autoWidth">
            <h3>
                <span></span>
                <font>{{font}}</font>
            </h3>
            <h4>{{title}}</h4>
            <a @click="mapTo">
                <i class="el-icon-bottom"/>
            </a>
        </div>
    </div>
</template>

<script>
import  {mapState} from "vuex"
export default {
     data(){
        return {
           
        }
    },
    methods :{
        mapTo(){
            this.$emit('jumpsTo')
        }
    },
    computed :{
        ...mapState({
            autoHeight : state => state.map.windows,
            autoWidth : state => state.map.width
        })
    },
    props: {
        url:String,
        title:String,
        font:String
    }
}
</script>

<style scoped lang="scss" >

.head {
    position: relative;
    .map {
        text-align: left;
        color: #FFF;
        margin-left: 50px;
        position: absolute;
        top:40%;
        font-size: 28px;
        padding: 15px 0;

        h3 {
            span {
                display: inline-block ;
                border-bottom: 1px solid #ffffff;
                width: 100px;
            }
        }
        h4{
            margin: 30px 0 30px 100px;
        }

        a {
            color: #fff;
            width: 50px;
            height: 50px;
            border: 1px solid #ffffff;
            border-radius: 25px;
            margin-left: 100px;
            display: inline-block;
            cursor: pointer;

            i {
                margin-left: 9px;
                animation: downico 1.5s ease-out infinite;
                position: relative;
                display: block;
                line-height: 50px;
            }

            @keyframes downico {
                 0%   {top:-50px;}
                100% {top:50px;}
            } 
        }
    }
}
</style>